<template>
  <div class="changePwd">
    <h3>修改密码</h3>
    <div>
      <div class="changePwd-pic">
        <img
          v-show="changePwdstep==1"
          class="img-pwd"
          src="../../assets/images/pwd1.png"
          alt
          width="350px"
        />
        <img
          v-show="changePwdstep==2"
          class="img-pwd"
          src="../../assets/images/pwd2.png"
          alt
          width="350px"
        />
        <p class="img-desc">
          <span>修改登录密码</span>
          <span :class="changePwdstep==2?'active':''">完成</span>
        </p>
      </div>
      <div class="changePwd-content process-content" v-show="changePwdstep==1">
        <Form ref="changePwdInfo" :rules="ruleValidate" :model="changePwdInfo" :label-width="120">
          <FormItem label="手机号" prop="phoneNumber">
            <Row>
              <i-col span="16">
                  <Input type="text" v-model="changePwdInfo.phoneNumber" placeholder="153400004142"/>
              </i-col>
              <i-col span="7" offset="1">
                  <i-button @click="getVercode">验证码</i-button>
              </i-col>
            </Row>
          </FormItem>
          <FormItem label="验证码" prop="verificationCode">
              <Input v-model="changePwdInfo.verificationCode"  placeholder="请输入验证码"/>
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
              <Input type="password" v-model="changePwdInfo.newPassword"  placeholder="请输入新密码"/>
          </FormItem>
          <FormItem label="确认新密码" prop="newPasswordAgain" style="margin-top:-10px;">
              <Input type="password" v-model="changePwdInfo.newPasswordAgain"  placeholder="请输入确认密码"/>
          </FormItem>
        </Form>
        <button class="changePwdBtn cursor-point" @click="handleSubmit('changePwdInfo')">保存</button>
      </div>
      <div class="changePwd-content result-content" v-show="changePwdstep==2">
        <img src="../../assets/images/successful.png" alt width="85px" />
        <p style="margin-top:-100px;">密码修改成功</p>
        <p class="backBtn cursor-point" @click="backHandler">返回</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changePassword",
  data() {
    const validatePhone = (rule, value, callback) => { //手机号
        if (value === '') {
            callback(new Error('请输入手机号码'));
        } else if(!(/^1[3456789]\d{9}$/.test(value))) {
            callback(new Error('请输入正确的手机号码'));
        } else {
          callback();
        }
    };
    const validateVerificationCode = (rule, value, callback) => { //验证码
        if (value === '') {
            callback(new Error('请输入验证码'));
        } else {
          callback();
        }
    };
    const validateNewPassword = (rule, value, callback) => { //新密码
        if (value === '') {
            callback(new Error('请输入新密码'));
        } else if(value.length<6){
          callback(new Error('密码要大于6位'));
        }else {
          callback();
        }
    };
    const validateNewPasswordAgain = (rule, value, callback) => { //确认新密码
        if (value === '') {
            callback(new Error('确认新密码不能为空'));
        } else if(value != this.changePwdInfo.newPassword){
          callback(new Error('两次密码输入不一致'));
        }else {
          callback();
        }
    };
    return {
      changePwdstep: 1,
      changePwdInfo: {
        phoneNumber: "",
        verificationCode: "",
        newPassword: "",
        newPasswordAgain: ""
      },
      ruleValidate: {
        phoneNumber: [{ required: true, validator:validatePhone, trigger: "blur" }],
        verificationCode: [{ required: true, validator:validateVerificationCode, trigger: "blur" }],
        newPassword: [{ required: true, validator:validateNewPassword, trigger: "blur" }],
        newPasswordAgain: [{ required: true, validator:validateNewPasswordAgain, trigger: "blur" }]
      },
    };
  },
  methods: {
    getVercode(){
      this.$axios('getMessageCode',[],{phoneNo:this.$token.getUUID()}).then(res=>{
        if(res.code == 200){
          //已发送短信验证码
        }else {
          this.$Message.error(res.msg);
        }
      })
    },
    handleSubmit(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            let changePwdObj = {
              userId:"226",
              userPwd:this.changePwdInfo.newPasswordAgain,
              // userPhone:AesUtil.encrypt(this.$token.getUUID()),
              userPhone:this.$token.getUUID(),
              smsCode:this.changePwdInfo.verificationCode
            }
            this.$axios('modifyPWputUser',[],changePwdObj).then(res=>{
              if(res.code == 200){
                this.changePwdstep = 2;
              }
            })
          } else {
            this.$Message.error("fail!");
          }
        });
    },
    backHandler() {
      this.changePwdstep = 1;
    }
  }
};
</script>

<style scoped>
.changePwd {
  min-height: 500px;
  background: #fff;
  padding: 0 20px 20px 20px;
}
h3 {
  line-height: 50px;
  border-bottom: 1px solid #e9e9e9;
}
.changePwd-pic {
  width: 350px;
  margin: 50px auto;
}
.img-pwd {
  display: block;
}
.img-desc {
  width: 350px;
  position: relative;
}
.img-desc span {
  width: 120px;
  display: block;
  text-align: center;
  position: absolute;
  top: 10px;
}
.img-desc span:nth-child(1) {
  left: -60px;
  color: #01a574;
}
.img-desc span:nth-child(2) {
  right: -60px;
}
.img-desc span:nth-child(2).active {
  color: #01a574;
}
.changePwd-content {
  width: 450px;
  margin: 20px auto;
}
.process-content {
  margin-top: 100px;
}
.changePwdBtn {
  margin: 50px auto;
  width: 150px;
  height: 35px;
  background: rgba(0, 165, 115, 1);
  border-radius: 4px;
  color: #fff;
  display: block;
  border: 1px solid rgba(0, 165, 115, 1);
}
.result-content img {
  display: block;
  margin: 120px auto;
}
.result-content p {
  text-align: center;
  height: 19px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
}
.result-content .backBtn {
  display: block;
  margin: 100px auto;
  width: 150px;
  height: 35px;
  line-height: 35px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(1, 165, 116, 1);
  border-radius: 4px;
  color: rgba(1, 165, 116, 1);
}
</style>